/**
 * 单选按钮组配置
 */
const RadioGroupConfig = {
    ITEM_CLASS: 'radio-item',
    INPUT_CLASS: 'radio-input',
    ITEM_CUSTOM: 'radio-input-custom',
    ITEM_CONTENT: 'radio-content',
    CONTAINER_CLASS: 'radio-group'
};

/**
 * 单选按钮组组件
 * @param {Object} options 配置选项
 * @param {Array} options.data 选项数据数组
 * @param {string} options.active 默认选中项key
 * @param {string} options.name 单选组名称
 * @param {string} options.type 布局类型(horizontal/vertical)
 * @param {string} options.container 容器选择器
 * @param {Function} options.onChange 选中项变化回调
 */
class RadioGroup {
    private data: Array<{ key: string, label: string }> = [];
    private activeId: string = '';
    private name: string = 'radio';
    private type: 'horizontal' | 'vertical' = 'horizontal';
    private container: string | null = null;
    private onChange: (item: { index: number, key: string, label: string }) => void = () => {};
    private htmlContent: string = '';
    private radioContainer: HTMLElement | null = null;

    constructor(options: {
        data?: Array<{ key: string, label: string }>,
        active?: string,
        name?: string,
        type?: 'horizontal' | 'vertical',
        container?: string,
        onChange?: (item: { index: number, key: string, label: string }) => void
    } = {}) {
        this.data = options.data || [];
        this.activeId = options.active || '';
        this.name = options.name || 'radio';
        this.type = options.type || 'horizontal';
        this.container = options.container || null;
        this.onChange = options.onChange || (() => {});
        
        this.init();
    }

    private init() {
        this.render();
        this.bindEvents();
    }

    private render() {
        if (this.data.length === 0) return;

        let contentHtml = `<section class="${RadioGroupConfig.CONTAINER_CLASS} ${this.type === 'vertical' ? 'radio-column' : ''}">`;
        const html = this.data.map((item, index) => this.generateRadioItem(item, index)).join('');
        contentHtml += `${html}</section>`;

        this.htmlContent = contentHtml;

        if (this.container) {
            const container = document.querySelector(this.container);
            container?.innerHTML = contentHtml;
        }
    }

    private generateRadioItem(item: { key: string, label: string }, index: number): string {
        const isActive = item.key === this.activeId;
        const inputName = this.name;
        const inputId = `${inputName}_${item.key}`;
        const checkedAttr = isActive ? 'checked' : '';

        return `
            <label class="${RadioGroupConfig.ITEM_CLASS}" data-index="${index}">
                <input 
                    type="radio" 
                    name="${inputName}" 
                    class="${RadioGroupConfig.INPUT_CLASS}" 
                    value="${item.key}" 
                    ${checkedAttr}
                />
                <span class="${RadioGroupConfig.ITEM_CUSTOM}"></span>
                <div class="${RadioGroupConfig.ITEM_CONTENT}">${item.label}</div>
            </label>
        `;
    }

    private bindEvents() {
        const radioContainer = document.querySelector(`.${RadioGroupConfig.CONTAINER_CLASS}`);
        if (radioContainer) {
            radioContainer.addEventListener('change', (e) => {
                const target = e.target;
                if (target.classList.contains(RadioGroupConfig.INPUT_CLASS)) {
                    const index = target.closest('label')?.dataset.index;
                    if (index !== undefined) {
                        const item = this.data[index];
                        this.onChange({ index: parseInt(index), ...item });
                    }
                }
            });
        }
    }

    /**
     * 更新单选组选项
     * @param {Array} newData 新选项数据
     * @param {string} newActive 新默认选中项
     */
    updateOptions(newData: Array<{ key: string, label: string }>, newActive?: string) {
        this.data = newData;
        this.activeId = newActive || '';
        this.render();
    }

    /**
     * 销毁组件
     */
    destroy() {
        if (this.container) {
            const container = document.querySelector(this.container);
            container?.innerHTML = '';
        }
    }
}
